<template>
    <div class="ordering">
        <div class="heading">学生列表</div>
        <div>
            <el-table ref="tableRef" row-key="date" :data="tableData" height="450" style="width: 100%">
                <el-table-column prop="date" label="签署日期" sortable width="180" column-key="date" :filters="[
                    { text: '2016-05-01', value: '2016-05-01' },
                    { text: '2016-05-02', value: '2016-05-02' },
                    { text: '2016-05-03', value: '2016-05-03' },
                    { text: '2016-05-04', value: '2016-05-04' },
                ]" :filter-method="filterHandler" />
                <el-table-column prop="name" label="企业" min-width="100" />
                <el-table-column prop="address" label="学校负责人" min-width="100" />
                <el-table-column prop="right" label="合同内容" min-width="100">
                    <template #default="scope">
                        <el-popover placement="right" :width="400" trigger="click">
                            <template #reference>
                                <el-button link type="primary" size="small">详情</el-button>
                            </template>
                            <h2 style="text-align: center">{{ scope.row.taskName }}</h2>
                            <div
                                style="background-color: #f5f5f5; margin-top: 5px; border: 1px solid; border-radius: 5px;min-height: 100px;padding: 5px;">
                                <el-text class="mx-1" size="large">{{ scope.row.content }}</el-text>
                            </div>
                            <h4>合同细节</h4>
                            <div
                                style="background-color: #f5f5f5; margin-top: 5px; border: 1px solid; border-radius: 5px;min-height: 50px;padding: 5px;">
                                <el-text class="mx-1" size="large">{{ scope.row.scaleRule }}</el-text>
                            </div>
                        </el-popover>
                        <el-button link type="primary" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { TableColumnCtx, TableInstance } from 'element-plus'

interface User {
    date: string
    name: string
    address: string
    right: string
}

const tableRef = ref<TableInstance>()

const resetDateFilter = () => {
    tableRef.value!.clearFilter(['date'])
}
// TODO: improvement typing when refactor table
const clearFilter = () => {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    tableRef.value!.clearFilter()
}
const formatter = (row: User, column: TableColumnCtx<User>) => {
    return row.address
}
const filterTag = (value: string, row: User) => {
    return row.right === value
}
const filterHandler = (
    value: string,
    row: User,
    column: TableColumnCtx<User>
) => {
    const property = column['property']
    return row[property] === value
}


const tableData = [
    {
        date: '2016-05-01',
        name: '一娃股份有限公司',
        address: '张老师',
        right: '2019-9-01',
    },
    {
        date: '2016-05-01',
        name: '二娃股份有限公司',
        address: '张老师',
        right: '2019-9-01',
    },
    {
        date: '2016-05-01',
        name: '三娃股份有限公司',
        address: '张老师',
        right: '2019-9-01',
    },
    {
        date: '2016-05-02',
        name: '四娃股份有限公司',
        address: '张老师',
        right: '2019-9-01',
    },
    {
        date: '2016-05-02',
        name: '五娃股份有限公司',
        address: '张老师',
        right: '2019-9-01',
    },
    {
        date: '2016-05-04',
        name: '六娃股份有限公司',
        address: '张老师',
        right: '2019-9-01',
    },
    {
        date: '2016-05-04',
        name: '七娃股份有限公司',
        address: '张老师',
        right: '2019-9-01',
    },
    {
        date: '2016-05-01',
        name: '八娃股份有限公司',
        address: '张老师',
        right: '2019-9-01',
    },
    {
        date: '2016-05-03',
        name: '九娃股份有限公司i',
        address: '张老师',
        right: '2019-9-01',
    },
    {
        date: '2016-05-02',
        name: '十娃股份有限公司',
        address: '张老师',
        right: '2019-9-01',
    },
    {
        date: '2016-05-04',
        name: '十一娃股份有限公司',
        address: '张老师1',
        right: '2019-9-01',
    },
    {
        date: '2016-05-01',
        name: '十二娃股份有限公司',
        address: '张老师',
        right: '2019-9-01',
    },
    {
        date: '2016-05-04',
        name: '十三娃股份有限公司',
        address: '张老师',
        right: '2019-9-01',
    },
    {
        date: '2016-05-03',
        name: '十四娃股份有限公司',
        address: '张老师',
        right: '2019-9-01',
    },
    {
        date: '2016-05-02',
        name: '十五娃股份有限公司',
        address: '201919164215',
        right: '2019-9-01',
    },
]
</script>

<style scoped></style>